<template>
  <a-modal
    title="库位"
    width="80%"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
		@cancel="handleCancel"
		  @ok="handleSubmit"
		
  >
    <a-spin :spinning="false">
      <a-form :form="form" layout="inline" labelAlign="right">
				<a-row :gutter="0">
          <a-col :md="8" :sm="24">
            <a-form-item label="库位名称">
              <a-input v-model="queryParam.name" placeholder="请输入"/>
            </a-form-item>
          </a-col>
					<a-col :md="8" :sm="24">
            <a-form-item label="编码">
              <a-input v-model="queryParam.code" placeholder="请输入"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button @click="()=>{ queryParam={}; $refs.table.refresh() }">重置</a-button>
							<a-button type="danger" @click="$refs.childNumAddAndEdit.init('add')">新增</a-button>
            </span>
          </a-col>
        </a-row>
				<div>
					
				</div>
        <s-table
					ref="table"
					style="margin-top: 15px;"
					size="default"
					:columns="columns"
					:data="loadData"
					:alert="true"
				>
					<!-- 库位 -->
					<span slot="childNum" slot-scope="text, record">
						<span>
							<a @click="$refs.childNumFormRef.init('add')">{{ record.childNum }}</a>
						</span>
					</span>
					<!-- 状态 -->
					<span slot="status" slot-scope="text, record">
						<a-switch v-model:checked="record.status == 0" :loading="record.loading" @change="onOrderStatusChange($event, record)"/>
					</span>
					<!-- 操作 -->
					<span slot="action" slot-scope="text, record">
						<a-button type="link" @click="$refs.childNumAddAndEdit.init('edit', record)">编辑</a-button>
					</span>
				</s-table>
      </a-form>
    </a-spin>
		<!--  新增编辑详情弹框  -->
    <childNumAddAndEdit 
			ref="childNumAddAndEdit" 
			@ok="$refs.table.refresh(true)"
			:pid="record.id"
			:materialType="materialType" 
		/>
  </a-modal>
</template>

<script>
import {
	getOrgPage,
	sysOrgAdd,
	sysOrgEdit,
	updateStatus,
} from '@/api/modular/system/orgManage.js'
import {STable} from '@/components'
import childNumAddAndEdit from './childNumAddAndEdit.vue'
  export default {
		components: {STable, childNumAddAndEdit},
		props:['materialType'],
    data () {
      return {
				dialogType:'',
				record:{},
				queryParam: {},
        columns: [
					{
						title: '序号',
						width: '80px',
						customRender: (text, record, index) => `${index + 1}`
					},
					{
						title: '库位名称',
						dataIndex: 'name'
					},
					{
						title: '编码',
						dataIndex: 'code'
					},
					{
						title: '状态',
						scopedSlots: {customRender: 'status'}
					},
					{
						title: '创建时间',
						dataIndex: 'createTime'
					},
					{
						title: '操作',
						align:'center',
						scopedSlots: {customRender: 'action'}
					}
				],
				// 加载数据方法 必须为 Promise 对象
				loadData: parameter => {
					console.log('record',this.record)
					let query = {
						...this.queryParam,
						...parameter,
						unitRanId: '1440880080270487553', //类型写死为库位
						// materialType: this.materialType,  // 物料类型
						pid: this.record.id,  // 父级id
					}
					return getOrgPage(query).then((res) => {
						console.log('res',res)
						return res.data
					})
				},
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
      }
    },
    methods: {
      // 初始化方法
      init (dialogType, record) {
				this.record = {...record}
				this.dialogType = dialogType
        this.visible = true
				this.$refs.table.refresh(true)
				// this.$nextTick(()=>{
				// 	// 编辑和详情需要回显
				// 	if(dialogType!='add'){
				// 		this.form.setFieldsValue(
				// 			{
				// 				cprkRemark: record.cprkRemark
				// 			}
				// 		)
				// 	}
				// })
      },
			onOrderStatusChange(checked, row) {
      row.loading = true
      let {id} = row
      let status = checked ? 0 : 1
      let parameter = {id, status}
      updateStatus(parameter).then(res => {
        this.handleOk()
				setTimeout(() => {
					this.$message.success('操作成功')
				}, 700)
      })
    },
		handleSubmit(){
			this.visible = false;
			this.form.resetFields();
			this.$emit("ok")
		},
		handleOk() {
      this.$refs.table.refresh()
    },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
      }
    }
  }
</script>
